<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common :: common_head(~{::title},~{},~{})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
<div id="app" onselectstart="return false">
    <template>
        <el-container>
            <el-header style="width: 100%;margin-right: 20px">
                <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#409EFF"
                        text-color="#ffffff"
                        active-text-color="" style="margin-left: -20px">
                    <el-menu-item index="1" style="box-shadow:beige 0px 0px 10px;width: 178px">首页</el-menu-item>
                    <el-menu-item index="2" style="box-shadow:beige 0px 0px 10px">处理中心</el-menu-item>
                    <el-menu-item index="3" style="box-shadow:beige 0px 0px 10px">消息中心</el-menu-item>
                    <el-menu-item index="4" style="box-shadow:beige 0px 0px 10px">订单管理</el-menu-item>
                    <el-menu-item index="5" style="float: right">
                        <div shadow="hover" class="logoMySelf">
                            <b> <span class="color-css"> Java Web 组件库</span></b>
                        </div>
                        <div style="display: inline-block" th:text="${username}"></div>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-main class="bodyMySelf">
                <div>
                    <el-row :gutter="12">
                        <el-col :span="8" :offset="8">
                            <h2 style="padding-left: 0px;clear: both">基于SpringBoot功能组件</h2>
                        </el-col>
                    </el-row>
                </div>
                <hr>
                <div>
                    <el-row :gutter="12">
                        <el-col :span="6" v-for="(item, index) in gridData" :key="index">
                            <el-card shadow="hover" class="logoMySelf" style="height: 140px">
                                <el-collapse @change="handleChange"
                                             style="margin-top: -20px;margin-left: -17px;width: 310px">
                                    <el-collapse-item :title="item.menuName" :name="index">
                                        <hr>
                                        <div style="text-align: left" v-for="(mySon, index2) in item.menus"
                                             :key="index2" v-if="index2 < 3">
                                            {{mySon.menuName}}
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                                <div style="margin-top: 50px">
                                    <a href="#" style="font-size: 1.4em"
                                       @click.stop.prevent="loginTest">查看详情 </a>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                </div>
            </el-main>
            <div>
                <div>
                    <iframe th:src="@{/getCaprcha}" frameBorder="0" width="400" scrolling="no" height="530px">
                    </iframe>
                </div>
            </div>
            <el-footer class="bodyMySelf">
                <hr>
                <p style="color: black">Copyright©2021&nbsp;<span href="http://www.guotong.work:8082/"
                                                                  target="_blank"
                                                                  title="baidu">作者:</span>郭童<span>|</span><span
                            href="http://www.guotong.work:8082/" target="_blank" rel="nofollow"
                            class="footer-record">没有备案</span><span>|</span><span
                            href="http://www.guotong.work:8082/" target="_blank" rel="nofollow"><i
                                class="beian"></i>就是因为没有钱</span>
                </p>
            </el-footer>
        </el-container>
    </template>
</div>

<style>
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-collapse-item__header {
        font-size: 1.5em;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .needDisplay {
        display: none;
    }

    .is-selected {
        color: #1989FA;
    }

    .el-menu-item {
        font-size: 17px;
        padding-left: 55px;
        padding-right: 55px;
        text-align: center;
    }

    .el-header, .el-footer {
        background-color: #409EFF;
        color: #409EFF;
        text-align: center;
        line-height: 60px;
    }

    .logoMySelf {
        background-color: lightskyblue;
        border-bottom: 1px solid #e6eaf5;
        box-shadow: greenyellow 0px 0px 10px;
        height: 60px;
    }

    .color-css {
        display: block;
        /*渐变背景*/
        padding-top: 0px;
        height: 60px;
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
        #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent; /*文字填充色为透明*/
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
        background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
        /* 动画 */
        animation: masked-animation 4s infinite linear;
    }

    @keyframes masked-animation {
        0% {
            background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
        }
        100% {
            background-position: -100% 0;
        }
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 80%;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-footer {
        display: block;
        background-color: gainsboro;
        bottom: 0px;
        width: 99%;
        margin: 0px auto;
    }

</style>
<script type="text/javascript" th:inline="javascript">
    const app = new Vue({
        el: '#app',//绑定节点
        data: {
            activeIndex2: '1',
            gridData: [], // 一级菜单
            encrypt: {},//加密对象
            pubkey: " ",//session中获取公钥
        },
        created() {
            this.initByAES();
            //判断是否登录
            if (!localStorage.getItem("token")) {
                this.loginTest();//模拟登录
            }
            //初始化菜单
            axios.get(contentPath + "menu/gradeByOneList", {
                params: {
                    thisPage: 0,
                    pageSize: 20
                }
            }).then(resp => {
                this.gridData = resp.data.data;
            });
        },
        watch: {//监听-属性

        },
        mounted() {


        },
        methods: {
            initByAES() {
                this.encrypt = new JSEncrypt();
                this.pubkey = [[${session.sessionKeys}]];//配置AES-秘钥公钥
                this.encrypt.setPublicKey(this.pubkey);
            },
            loginTest() {
                let sendData = {
                    username: "admin",
                    password: this.encrypt.encrypt("admin")
                }
                let captchaSuccess = window.localStorage.getItem("captcha");
                if (captchaSuccess) {
                    window.localStorage.removeItem("captcha");
                } else {
                    console.log("验证码未通过")
                    return false;
                }
                //模拟登录
                axios.post(contentPath + 'logging', JSON.stringify(sendData)).then(resp => {
                    if (resp.data.code == 200) {
                        console.log("模拟登录成功-admin用户+");
                        localStorage.setItem('token', resp.data.data);
                    } else {
                        console.log(resp);
                    }

                }).catch(error => {
                    console.log(error)
                });
            }, handleSelect() {

            }, handleChange() {

            },
        }
    });
</script>
</body>
</html>